<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实时监控 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .monitor-card {
            transition: all 0.3s ease;
        }
        .monitor-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        .status-working { background-color: #28a745; }
        .status-idle { background-color: #007bff; }
        .status-maintenance { background-color: #ffc107; }
        .status-error { background-color: #dc3545; }
        .status-offline { background-color: #6c757d; }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-desktop"></i> 设备实时监控</h2>
            <div>
                <button class="btn btn-success" onclick="refreshData()">
                    <i class="fas fa-sync-alt"></i> 刷新
                </button>
                <a href="/vehicles" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>
        </div>
        
        <div class="row" id="vehicleCards">
            <div class="col-md-4 mb-4" th:each="vehicle : ${vehicles}">
                <div class="card monitor-card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <span th:class="'status-indicator status-' + ${vehicle.status.name().toLowerCase()}"></span>
                            <span th:text="${vehicle.name}"></span>
                        </h6>
                        <small class="text-muted" th:text="${vehicle.type}"></small>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-6">
                                <small class="text-muted">状态</small>
                                <div>
                                    <span th:class="'badge ' + 
                                          (${vehicle.status} == 'WORKING' ? 'bg-success' : 
                                           ${vehicle.status} == 'IDLE' ? 'bg-primary' : 
                                           ${vehicle.status} == 'MAINTENANCE' ? 'bg-warning' : 
                                           ${vehicle.status} == 'ERROR' ? 'bg-danger' : 'bg-secondary')"
                                          th:text="${vehicle.status.description}"></span>
                                </div>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">电池</small>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar" 
                                         th:style="'width: ' + ${vehicle.batteryLevel} + '%'"
                                         th:class="'progress-bar ' + 
                                                 (${vehicle.batteryLevel} > 50 ? 'bg-success' : 
                                                  ${vehicle.batteryLevel} > 20 ? 'bg-warning' : 'bg-danger')"
                                         th:text="${vehicle.batteryLevel} + '%'"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-3" th:if="${vehicle.latitude != null and vehicle.longitude != null}">
                            <div class="col-12">
                                <small class="text-muted">位置</small>
                                <div>
                                    <i class="fas fa-map-marker-alt text-danger"></i>
                                    <small th:text="${#numbers.formatDecimal(vehicle.latitude, 1, 4)} + ', ' + ${#numbers.formatDecimal(vehicle.longitude, 1, 4)}"></small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-6">
                                <small class="text-muted">工作时长</small>
                                <div th:text="${vehicle.workingHours != null ? vehicle.workingHours + 'h' : '0h'}"></div>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">最后更新</small>
                                <div>
                                    <small th:text="${#temporals.format(vehicle.lastUpdateTime, 'HH:mm:ss')}"></small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-1">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-success" 
                                        th:onclick="'sendQuickCommand(' + ${vehicle.id} + ', \"start\")'">
                                    <i class="fas fa-play"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-warning" 
                                        th:onclick="'sendQuickCommand(' + ${vehicle.id} + ', \"pause\")'">
                                    <i class="fas fa-pause"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-info" 
                                        th:onclick="'sendQuickCommand(' + ${vehicle.id} + ', \"return\")'">
                                    <i class="fas fa-home"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger" 
                                        th:onclick="'sendQuickCommand(' + ${vehicle.id} + ', \"stop\")'">
                                    <i class="fas fa-stop"></i>
                                </button>
                            </div>
                            <a th:href="@{/vehicles/detail/{id}(id=${vehicle.id})}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i> 详情
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function sendQuickCommand(vehicleId, command) {
            fetch(`/api/vehicles/${vehicleId}/control`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({command: command})
            })
            .then(response => response.text())
            .then(data => {
                console.log('Command sent successfully');
                // 延迟刷新以显示状态变化
                setTimeout(refreshData, 1000);
            })
            .catch(error => {
                console.error('Error sending command:', error);
                alert('指令发送失败');
            });
        }
        
        function refreshData() {
            location.reload();
        }
        
        // 自动刷新数据
        setInterval(refreshData, 10000); // 每10秒刷新一次
        
        // 页面加载完成后显示刷新提示
        document.addEventListener('DOMContentLoaded', function() {
            console.log('监控页面已加载，每10秒自动刷新数据');
        });
    </script>